<template>
	<view class="container ">
		<view class="bg-img" :style="'background-image: url('+WEBCONFIG.image+');'">
		</view>
		<view class="p-6">
			<view class="flex flex-row flex-y-center mb-10" @click="show()">
				<view class="bg-white pd-1 flex flex-center rounded-7">
					<image class="avatar rounded-7" :src="USERINFO.avatar!=''?USERINFO.avatar:WEBCONFIG.avatar">
					</image>
				</view>

				<view class="ml-2">
					<view class="h8 text-white font-weight-500 mb-2 ellipsis-text w-50">{{USERINFO.nickname}}</view>
					<view class="h8 text-white h9 font-weight-300">{{USERINFO.id}}</view>
				</view>
			</view>

			<view :style="'background-image: url('+ WEBCONFIG.image1 +');'"
				class="account-box flex flex-row flex-x-space-between p-6 mb-5">
				<view class="ml-3">
					<view class="h8 text-white font-weight-500 mb-2">积分余额</view>
					<view class="h2 font-weight-700 text-white">{{USERINFO.points}}</view>
				</view>
				<view>
					<view class="btn flex flex-center h8 font-weight-400"
						v-if='platfom=="ios"&&WEBCONFIG?.pay_status=="2"' @click="cdkey()">
						兑换
					</view>
					<view class="btn flex flex-center h8 font-weight-400" @click="$page.open('/pages/package/index')"
						v-else>
						充值
					</view>
				</view>

			</view>

			<view :style="'background-image: url('+ WEBCONFIG.image2 +');'" class="list-box p-7">
				<view class="flex flex-row" @click="$page.open('/pages/order/index');">
					<image class="icon" src="@/static/icon/icon-2.png"></image>
					<view class="text-white h8 ml-6">订单</view>
				</view>
				<view class="line mt-4 mb-4"></view>
				<view class="flex flex-row" @click="cdkey()">
					<image class="icon" src="@/static/icon/icon-1.png"></image>
					<view class="text-white h8 ml-6">卡密兑换</view>
				</view>
				<view class="line mt-4 mb-4"></view>
				<view class="flex flex-row" @click="openCustomer">
					<view
						style="background: rgba(165, 165, 165, 0.5);border-radius: 50%;opacity: 0.8;width: 48rpx;height: 48rpx;"
						class="flex flex-center">
						<image style="height: 30rpx;width: 30rpx;" src="@/static/icon/icon-3.png"></image>
					</view>
					<view class="text-white h8 ml-6">联系客服</view>
				</view>
			</view>
		</view>

		<uni-popup ref="showPop">
			<view class="bg-white p-4">
				<view class="mb-3 flex flex-row flex-y-center">
					<image class="avatar rounded-circle" :src="WEBCONFIG.web_logo">
					</image>
					<view class="h8 ml-5">{{WEBCONFIG.web_name}}</view>
				</view>
				<view class="h8 font-weight-700 mb-2"> 设置您的昵称头像</view>
				<view class="h9 text-dark-light-4 mb-3">用于展示您的用户信息</view>
				<view class="p-4">
					<view class="line mt-3 mb-3"></view>
					<view class="flex flex-row flex-y-center flex-x-space-between p-4">
						<view class="h9 text-dark-light-1"> 头像</view>
						<button class="btn-normal  flex flex-row flex-y-center" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							<view class="flex flex-row flex-y-center">
								<image class="avatar" :src='avatar' v-if='avatar'></image>
								<view class=" h9 text-primary-dark-2 mr-2" v-else>点击设置头像</view>
								<uni-icons type="right" size="20" color="#666"></uni-icons>
							</view>
						</button>
					</view>
					<view class="line mt-3 mb-3"></view>
					<view class="flex flex-row flex-y-center flex-x-space-between p-4">
						<view class="h9 text-dark-light-1"> 昵称</view>
						<view class="flex flex-row flex-y-center">
							<input class="h9 mr-2" v-model="nickname" type="nickname" placeholder-style="color:#f30323"
								style="text-align: right;" placeholder="点击设置昵称" />

							<uni-icons type="right" size="20" color="#666"></uni-icons>
						</view>
					</view>
					<view class="line mt-3 mb-3"></view>
				</view>

				<view class="btn-1 text-white flex flex-center p-3" @click="submit">提交</view>
			</view>
		</uni-popup>
		<ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	import { onLoad, onShow, onShareTimeline, onShareAppMessage } from "@dcloudio/uni-app";
	import { useUserStore, useWebConfigStore, useRefs } from "@/stores";
	import { $page, $http } from '@/utils'
	const showPop = ref()
	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	const userStore = useUserStore()
	const { USERINFO } = useRefs(userStore);
	const avatar = ref()
	const nickname = ref()
	const platfom = uni.getSystemInfoSync().platform

	onShow(() => {
		getUser()
	})
	//分享
	onShareTimeline(() => {
		return $page.shareTimeline({
			path: '/pages/index/index'
		})
	})

	onShareAppMessage(() => {
		return $page.shareTimeline({
			path: '/pages/index/index'
		})
	})
	//卡密兑换
	const cdkey = (() => {
		uni.showModal({
			title: '卡密兑换',
			editable: true,
			placeholderText: '请输入卡密',
			success(e) {
				if (e.confirm) {
					$http.post('Cdkey/cdkey', { data: { key: e.content } }).then(res => {
						uni.showToast({
							title: '兑换成功',
							icon: 'none'
						})
						getUser()
					})
				}
			}
		})
	})
	const getUser = (() => {
		$http.get('User/detail').then(res => {
			userStore.setUserInfo(res.data)
		})
	})

	//修改用户信息
	const submit = (() => {
		$http.upload('Upload/upload', { name: 'file', filePath: avatar.value }).then((res1 : any) => {
			$http.post('User/save', { data: { nickname: nickname.value, avatar: res1.data.url } }).then(res => {
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				})
				getUser()
				showPop.value.close()
			})
		})

	})

	//获得临时头像
	const onChooseAvatar = ((e : any) => {
		avatar.value = e.detail.avatarUrl

	})

	const show = (() => {
		showPop.value.open('bottom')
	})

	const openCustomer = () => {
		let config = WEBCONFIG.value
		if (config?.customer_status == '2') {
			wx.openCustomerServiceChat({
				extInfo: {
					url: WEBCONFIG.value.customer_url
				},
				corpId: WEBCONFIG.value.customer_corpId, //必须和你小程序上的一致
				success(res : any) {
					console.log(res, 1)
				},
				fail(res : any) {
					uni.showModal({
						title:'提示',
						content:'打开失败:'+res.errMsg
					})
				},
			})
		} else {
			uni.showToast({
				title: '系统未配置客服',
				icon: 'none'
			})
		}
	}
</script>
<style lang="scss" scoped>
	.bg-img {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 578rpx;
		width: 100%;

		position: fixed;
		z-index: -1;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
	}

	.account-box {
		height: 212rpx;
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.list-box {
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.avatar {
		width: 108rpx;
		height: 108rpx;
	}

	.rounded-7 {
		border-radius: 42rpx;
	}

	.pd-1 {
		padding: 2rpx;
	}

	.btn {
		width: 130rpx;
		height: 68rpx;
		border-radius: 60rpx;
		background: linear-gradient(to right, #ACACFF, #E8EEFF, #F0D8FF);
	}

	.icon {
		width: 48rpx;
		height: 48rpx;
	}

	.line {
		width: 624rpx;
		height: 0rpx;
		// border: 2rpx solid rgba(255, 255, 255, 0.05);
	}



	.btn-normal {
		display: block;
		margin: 0;
		padding: 0;
		line-height: normal;
		background: none;
		border-radius: 0;
		box-shadow: none;
		border: none;
		font-size: unset;
		text-align: unset;
		overflow: visible;
		color: inherit;
	}

	.btn-normal:after {
		border: none;
	}

	.btn-normal.button-hover {
		color: inherit;
	}

	button:after {
		content: none;
		border: none;
	}

	.btn-1 {
		border-radius: 40rpx;
		width: 60%;
		margin: 10px auto;
		background-color: #0476eb;
	}

	.line {
		background-color: #eaeaea;
		height: 1px;
		width: 100%;
	}
</style>